<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
				font-family: "微软雅黑";
			}
			body{
				height: 740px;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<script src="../js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var minSize = 5;//设置最小的雪花
				var maxSize = 20;//设置最大的雪花
				var newOn = 50;//设置雪花出现的频率
				var flakeColor = "#fff";//设置雪花的颜色
				//设置雪花的模板
				var $flake = $("<div></div>").css({"position":"absolute","top":"-50px"}).html("❄");
				var bodyHeight = $(document).height();//设置雪花的高度 获得body的高度
				var bodyWidth = $(document).width();//设置雪花的宽度 获得body的宽度
				setInterval(function(){
					//产生雪花X轴的初始位置
					var startPostionLeft = Math.random() * bodyWidth - 100;
					var startOpacity = 0.7 + Math.random();//雪花一开始的透明度
					//产生的雪花要在最小值和最大值之间
					var sizeFlake = minSize + Math.random() * maxSize;
					//设置雪花下降后的终点上的y轴
					var endPostionTop = bodyHeight - 50;
					//设置雪花下降后的终点
					var endPOstionLeft = startPostionLeft - 400 +Math.random() * 500;
					//雪花飘落的速度
					var durationFall = Math.random() * 5000;
					$flake.clone().appendTo("body").css({
						"left":startPostionLeft,
						"opacity":startOpacity,
						"font-size":sizeFlake,
						"color":flakeColor
					}).animate({
						'top':endPostionTop,
						'left':endPOstionLeft,
						"opacity":0.5
					},durationFall,function(){
						$(this).remove();
					})
				},newOn)
			})
		</script>
	</body>
</html>
